<template>
  <div class="vue-skeleton clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">第一步</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            依赖引入<br>
            npm install vue-skeleton-webpack-plugin
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">第二步</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 修改webpack.prod.conf.js<br>
            const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')<br>
            <br>
            plugins: [<br>
              &nbsp;&nbsp;new SkeletonWebpackPlugin({<br>
                &nbsp;&nbsp;&nbsp;&nbsp;webpackConfig: require('./webpack.skeleton.conf'),<br>
                &nbsp;&nbsp;&nbsp;&nbsp;quiet: true<br>
              &nbsp;&nbsp;})<br>
            ]
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">第三步</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            build文件夹下新建webpack.skeleton.conf.js
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">第四步</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            src目录下新建Skeleton.vue和entry-skeleton.js
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">第五步</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 修改mian.js
            let app = new Vue({<br>
              &nbsp;&nbsp;router,<br>
              &nbsp;&nbsp;components: { App },<br>
              &nbsp;&nbsp;template: '&lt;App/&gt;'<br>
            })<br>
            <br>
            window.mountApp = () => {<br>
              &nbsp;&nbsp;app.$mount('#app')<br>
            }<br>
            if (window.STYLE_READY) {<br>
              &nbsp;&nbsp;window.mountApp()<br>
            }
          </code>
        </div>
      </el-card>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'VueSkeleton'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-skeleton{
  margin: 0 auto;
  overflow: hidden;
  .main{
    column-count: 2;
    column-gap:10px;
    padding: 10px;
  }
  .el-card{
    margin: 10px 0;
  }
  .el-card__header{
    padding: 0 10px;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    line-height: 30px;
  }
}
</style>
